<template>
	<!-- 考试须知 -->
	<view class="notice-content">
		<view class="notice-box">
			<view class="notice-title">
				科目{{currentTag == 1?'一':'四'}}考试
			</view>
			<view class="notice-detail">
				<view class="notice-text">
					<view>考试须知</view>
					<view>1.遵守考察纪律，服从监考人员指挥。<br/>
						2.进入考察、手机关机。禁止抽烟，禁止吃零食。<br/>
						3.未经工作人员允许，考试禁止随意出入考场。<br/>
						4.考察内禁止大声喧哗，禁止随意走动。<br/>
						5.考试中认真答题，不准交头接耳。<br/>
						6.考试中不准冒名顶替，不准弄虚作假。<br/>
						7.注意考场卫生，禁止随地吐痰，禁止乱扔纸屑。
					</view>
				</view>
				<view class="room-info">
					<view class="roon-title">理论考试{{examAddress}}号考台</view>
					<view class="user-info">
						<view>
							<view>身份证：</view>
							<view>{{'522XXXXXXXXXXXXXXXX'}}</view>
							<view>考试姓名：{{userInfo.nickname}}</view>
						</view>
						<view>
							<u-button type="success" shape="circle" :custom-style="customStyle" @click="changeSteps">确认考试</u-button>
						</view>
						<view>点击“确定考试”按钮 开始考试</view>
					</view>
					<view class="tips">
						操作提示：每题考试答案确 定后，点击【下一题】，电 脑立即判定所选答案，如选 择错误，系统将提示正确答 案，提示后不允许修改答
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="tipsShow" :mask-close-able="false" mode="center" border-radius="20" height="420rpx" width="600rpx">
			<view class="tips-box">
				<view class="tips-text">
					<image src="../../../static/index/ts.png" mode=""></image>
					<view class="text">
						新人免费试用5次，超过5次后自动锁定
					</view>
					<view class="num">
						剩余<text>{{buyInfo.tryNum}}</text>次
					</view>
				</view>
				<view class="btn-box">
					<view @click="goOnExam">继续考试</view>
					<view class="green" @click="buyCourse">购买课程</view>
				</view>
				<view class="exit" @click="tipsShow = false">
					<image src="../../../static/index/EXIT.png" mode=""></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getExams } from '../../../api/index.js';
	import { getPurchasedCourses } from '@/api/index.js'
	export default {
		data() {
			return {
				customStyle: {
					background: '#2AC092',
					color: '#fff'
				},
				// 提示框,
				tipsShow:false,
				userInfo:{},
				count:1,
				
				//
				subject:1,
			}
		},
		props:['buyInfo','currentTag','examAddress'],
		// onLoad(options) {
		// 	console.log(11111,options);
		// },
		mounted() {
			if(this.currentTag==4){
				this.subject=2
			}
			
			if(Object.keys(this.$store.state.authInfo).length == 0){
				this.userInfo = (uni.getStorageSync('userInfo'))
			}else{
				this.userInfo = this.$store.state.authInfo;
			}
		},
		methods: {
			// 传递给父组件的步骤数，告诉父组件需要进行下一步了
			changeSteps() {
				// 如果未购买课程，每次弹窗提示
				// console.log(this.buyInfo,'buyInfo');
				// if(!this.buyInfo.isBuy){
				// 	this.tipsShow = true
				// 	return
				// }
				let that = this
				getPurchasedCourses({subject:this.subject}).then(res=>{
					// console.log(888,res.data.data);
					that.courseList = res.data.data;
					if(res.data.data.length == 0){
						// that.buyInfo == false;
						that.tipsShow = true;
						that.buyInfo.tryNum = uni.getStorageSync('exam_count');
					}else{
						that.buyInfo == true;
						that.tipsShow = false;
						uni.removeStorageSync('exam_count')
					}
				}).catch()
				// this.$emit('getSteps', 2)
			},
			goOnExam(){
				this.tipsShow = false;
				let that = this;
				uni.showLoading({
					title: '加载中'
				});
				// if(that.buyInfo.tryNum > 0){
				// 	that.buyInfo.tryNum--;
				// 	uni.setStorageSync('exam_count', that.buyInfo.tryNum);
					getExams({subject:this.subject}).then(res=>{
						uni.hideLoading();
						that.$emit('getSteps', 2)
					}).catch()
					this.$emit('getSteps', 2)
				// 	// 继续考试后，试用次数调取接口-1
				// }else{
				// 	uni.hideLoading();
				// 	uni.showToast({
				// 		title: '考试次数已用完',
				// 		duration: 2000
				// 	});
				// 	setTimeout(()=>{
				// 		uni.hideToast();
				// 	},3000)
				// }
			},
			buyCourse(){
				uni.navigateTo({
					url:'/pagesA/goodCourse/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.notice-box {
		width: 95%;
		margin: 20rpx auto;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;

		.notice-title {
			width: 100%;
			margin: 30rpx 0;
			font-size: 36rpx;
			text-align: center;
		}

		.notice-detail {
			display: flex;

			>view {
				flex: 1;
				border: 1rpx solid #E6E6E6;
				padding: 20rpx;
			}
			
			.notice-text{
				border-right: none;
				
				>view:nth-child(1){
					font-size: 32rpx;
					margin-bottom: 23rpx;
				}
				
				>view:nth-child(2){
					font-size: 28rpx;
					line-height: 1.5;
				}
			}
		}
		
		.room-info{
			
			.roon-title{
				font-size: 32rpx;
			}
			
			.user-info{
				margin: 23rpx 0;
				line-height: 2;
				color: #2AC092;
				font-size: 28rpx;
				
				>view:nth-child(2){
					margin: 20rpx 0;
				}
			}
			
			.tips{
				line-height: 2;
				font-size: 24rpx;
			}
		}
	}
	.tips-box {
		display: flex;
		flex-direction: column;
		height: 100%;
		position: relative;
	
		.tips-text {
			flex: 3;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			color: #333333;
			font-size: 28rpx;
			padding: 20rpx 0;
	
			>image {
				width: 80rpx;
				height: 80rpx;
			}
	
			.text {
				margin: 30rpx 0;
			}
	
			.num {
	
				>text {
					font-size: 48rpx;
					color: #2AC092;
				}
			}
		}
	
		.btn-box {
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: space-around;
			font-size: 32rpx;
	
			>view {
				height: 100%;
				border: 0.5px solid #E6E6E6;
				flex: 1;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
			}
	
			.green {
				color: #2AC092;
			}
		}
		
		.exit{
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			
			>image{
				width: 42rpx;
				height: 42rpx;
			}
		}
	}
</style>